﻿@import '_variaveis.scss';
@import '_mixins.scss';

#sectionHome {
	@include float(auto, 100%);
}

#sectionProdutos {
	@include float(auto, 100%);
	margin-top: 30px;

	.articleProduto {
		@include float(470px, 400px);
		margin-left: 3%;
		margin-bottom: 50px;
		text-align: center;
		background: white;
		-moz-box-shadow: 0 0 5px 2px #aaa;
		-webkit-box-shadow: 0 0 5px 2px #aaa;
		box-shadow: 0 0 5px 2px #aaa;

		&:hover {
			/*box-shadow: 5px 5px 5px 2px #999;*/
			-moz-box-shadow: 0 0 5px 3px $background_header;
			-webkit-box-shadow: 0 0 5px 3px $background_header;
			box-shadow: 0 0 5px 3px $background_header;
		}

		& .articleImagemProduto {
			height: 250px;
			background: white;

			& .imagemProduto {
				max-height: 250px;
				max-width: 250px;
			}
		}

		& .articlePromocao {
			position: relative;
			top: -250px;
			left: 0;
			height: 100px;
			width: 100px;
			background: rgba(255, 50, 50, 0.7);
		}

		& .articleDescricaoProduto {
			margin-top: -80px;
			height: 150px;
			width: 100%;
			font-weight: bold;
			font-size: 30px;
		}

		& .articlePreco {
			margin-left: 5%;
			height: 40px;
			width: 90%;
			line-height: 39px;
			font-weight: bold;
			font-size: 30px;
			border-top: 2px dashed red;
			/*background: #eee;*/
		}
	}
}

@media only screen and (max-width: 1300px) and (min-width: 1051px) {
	#sectionProdutos {
		.articleProduto {
			margin-left: 1% !important;
			margin-bottom: 50px;
			text-align: center;
			background: white;
			-moz-box-shadow: 0 0 5px 2px #aaa;
			-webkit-box-shadow: 0 0 5px 2px #aaa;
			box-shadow: 0 0 5px 2px #aaa;

			&:hover {
				/*box-shadow: 5px 5px 5px 2px #999;*/
				-moz-box-shadow: 0 0 5px 3px $background_header;
				-webkit-box-shadow: 0 0 5px 3px $background_header;
				box-shadow: 0 0 5px 3px $background_header;
			}

			& .articleImagemProduto {
				height: 250px;
				background: white;

				& .imagemProduto {
					max-height: 250px;
					max-width: 250px;
				}
			}

			& .articlePromocao {
				position: relative;
				top: -250px;
				left: 0;
				height: 100px;
				width: 100px;
				background: rgba(255, 50, 50, 0.7);
			}

			& .articleDescricaoProduto {
				margin-top: -80px;
				height: 150px;
				width: 100%;
				font-weight: bold;
				font-size: 30px;
			}

			& .articlePreco {
				margin-left: 5%;
				height: 40px;
				width: 90%;
				line-height: 39px;
				font-weight: bold;
				font-size: 30px;
				border-top: 2px dashed red;
				/*background: #eee;*/
			}
		}
	}
}

@media only screen and (max-width: 1050px) and (min-width: 871px) {
	.articleProduto {
		margin-left: 6% !important;
	}
}

@media only screen and (max-width: 870px) and (min-width: 341px) {
	.articleProduto {
		height: 370px !important;
		width: 300px !important;
		margin-left: 6% !important;

		& .articleImagemProduto {
			height: 175px !important;

			& .imagemProduto {
				max-height: 175px !important;
				max-width: 175px !important;
			}
		}

		& .articlePromocao {
			top: -175px !important;
			height: 75px !important;
			width: 75px !important;
		}

		& .articleDescricaoProduto {
			margin-top: -80px;
			height: 150px;
			width: 100%;
			font-weight: bold;
			font-size: 30px;
		}

		& .articlePreco {
			margin-left: 5%;
			height: 40px;
			width: 90%;
			line-height: 39px;
			font-weight: bold;
			font-size: 30px;
			border-top: 2px dashed red;
			/*background: #eee;*/
		}
	}
}

@media only screen and (max-width: 340px) {
	#sectionProdutos {
		.articleProduto {
			@include float(370px, 300px);
			margin-left: 2%;

			& .articleImagemProduto {
				height: 200px;
				background: white;

				& .imagemProduto {
					max-height: 200px;
					max-width: 200px;
				}
			}

			& .articlePromocao {
				position: relative;
				top: -200px;
				left: 0;
				height: 50px;
				width: 50px;
				background: rgba(255, 50, 50, 0.7);
			}

			& .articleDescricaoProduto {
				margin-top: -60px;
				height: 140px;
				width: 100%;
				font-weight: bold;
				font-size: 30px;
			}

			& .articlePreco {
				margin-left: 5%;
				height: 40px;
				width: 90%;
				line-height: 39px;
				font-weight: bold;
				font-size: 30px;
				border-top: 2px dashed red;
				/*background: #eee;*/
			}
		}
	}
}
